<template>

  <view class="special main-box feat-grid">

    <view v-for="(item,index) in store.specialTabList" @click="handleGoToDetail(item)" class="special-list main-bg"
          :style="{'background-image': 'url('+ domainImage(item.cover) +')'}"
    >
    </view>


  </view>

</template>
<script setup>
import {ref, reactive} from 'vue';
import { jump,domainImage } from '@/utils/index';
import { onReachBottom,onShow,onLoad } from "@dcloudio/uni-app";
import { playStore } from "@/stores";
import qs from "qs";

const store = playStore();

const renderData = reactive({
  id:''
})

//跳转详情
const handleGoToDetail = (item)=>{
  let  queryString = qs.stringify({
    specialId:item.id,
    cover:item.cover,
    title:item.title
  });
  jump('/pages/play/specialDetail?'+ queryString,true)
}
onLoad(()=>{
  store.clearSpecialTabList();
  store.handleGetSpecialTabList('reset')
})
onReachBottom(()=>{
  //store.handleGetSpecialTabList('scroll');
})


</script>

<style lang="scss" scoped>
.special{
  background-color:$main-j;
  &-list{
    @include main-line3;
    width: 100%;
    height: 350rpx;
    border-radius: 30rpx;
    background-color: $main-text-d;
  }

}
</style>
